<template>
  <!-- <div>{{total}},{{v}},{{nodes}}</div> -->
   <div id="tree" ref="tree"></div>
</template>

<script>
 import request from "@/utils/request";
  //  import FamilyTree from '@balkangraph/familytree.js'
   export default {
      name: 'Tree',
      data() {
         return {
          nodes:[],
          temp:[],
          total:0,  
          v:"",
         }},
      created(){
          this.getNodeList();
      },
      methods: {
          mytree: function(domEl, x) {
              this.family = new FamilyTree (domEl, {
                 nodes: x,
                    nodeBinding: {
                       field_0: "name",
                       img_0: "img"
                     }
                 });
             },
          async getNodeList(){
          const { data: res } = await this.$http.get("/familytree");
          if (res.code != 1) {
              this.$message.error("加载家族族谱失败");
          }
          this.total=res.data.total;
          this.v=res.data.rows;
          var count=0;
          for(var i in res.data.rows)
          {
              count++;
              if(count==1)
              {
                 
                      var map={"id":0,"pids":[],"name":"","sex":"","birthday":"","family":"","img":"","_del":false };                     
                      map["id"]=res.data.rows[i]["id"];
                      map["pids"][0]=res.data.rows[i]["pids"];
                      map["name"]=res.data.rows[i]["name"];
                      map["sex"]=res.data.rows[i]["sex"];
                      map["birthday"]=res.data.rows[i]["birthday"];
                      map["family"]=res.data.rows[i]["family"];
                      map["img"]=res.data.rows[i]["img"];
                      map["_del"]=res.data.rows[i]["_del"];
                      this.temp[i]=map;  

              }
             else{
                      // eslint-disable-next-line no-redeclare
                     var map={"id":0,"pids":[],"mid":[],"fid":[],"name":"","sex":"","birthday":"","family":"","img":"","_del":false };
                      map["id"]=res.data.rows[i]["id"];
                      map["pids"][0]=res.data.rows[i]["pids"];
                      map["mid"][0]=res.data.rows[i]["mid"];
                      map["fid"][0]=res.data.rows[i]["fid"];
                      map["name"]=res.data.rows[i]["name"];
                      map["sex"]=res.data.rows[i]["sex"];
                      map["birthday"]=res.data.rows[i]["birthday"];
                      map["family"]=res.data.rows[i]["family"];
                      map["img"]=res.data.rows[i]["img"];
                      map["_del"]=res.data.rows[i]["_del"];
                      this.temp[i]=map;
 
             }
          }
          
          // eslint-disable-next-line no-redeclare
          for(var i =this.total-1;i>=0;i--)
          {

                  this.nodes[i] = this.temp[i]; 
          }
      }
   },
   mounted(){
        this.mytree(this.$refs.tree, this.nodes)
        }
    }
</script>

<style scoped>
</style>